<template>
    <a-modal
        width="800px"
        centered
        :visible="visible"
        :title="title"
        @ok="handleOk"
        @cancel="handleCancel"
    >
        <!-- 编辑 -->
        <a-form
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 14 }"
            :model="form"
            v-if="type && type === 1"
        >
            <a-form-item
                label="数据来源："
                required
                v-bind="validateInfos.sjly"
            >
                <a-input
                    v-model:value="form.sjly"
                    placeholder="请输入数据来源"
                ></a-input>
            </a-form-item>
            <a-form-item
                label="数据来源名称："
                required
                v-bind="validateInfos.sjymc"
            >
                <a-input v-model:value="form.sjymc" placeholder=""></a-input>
            </a-form-item>
            <a-form-item label="ip地址：" required v-bind="validateInfos.ip">
                <a-input v-model:value="form.ip" placeholder=""></a-input>
            </a-form-item>
            <a-form-item label="端口号：" required>
                <a-input v-model:value="form.port" placeholder=""></a-input>
            </a-form-item>
            <a-form-item label="数据库实例：">
                <a-input v-model:value="form.sid" placeholder=""></a-input>
                <div style="font-size: 12px">
                    <InfoCircleFilled />数据库实例，
                </div>
            </a-form-item>
            <a-form-item label="数据库版本：">
                <a-input v-model:value="form.version" placeholder=""></a-input>
            </a-form-item>
            <a-form-item label="是否启用：">
                <a-switch
                    :checked="form.isable === '1'"
                    @click="toggleChecked"
                />
            </a-form-item>
            <a-form-item label="备注：">
                <a-textarea
                    v-model:value="form.bz"
                    showCount
                    :maxlength="500"
                />
            </a-form-item>
        </a-form>
        <!-- 重置 -->
        <a-form
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 14 }"
            :model="form"
            v-if="type && type === 2"
        >
            <a-form-item label="用户名：" required v-bind="validateInfos.yhm">
                <a-input v-model:value="form.yhm"></a-input>
            </a-form-item>
            <a-form-item
                label="输入密码："
                required
                v-bind="validateInfos.fwmm"
            >
                <a-input v-model:value="form.fwmm" placeholder=""></a-input>
            </a-form-item>
        </a-form>
        <template #footer>
            <a-button key="back" @click="handleCancel">关闭</a-button>
            <a-button
                key="submit"
                type="primary"
                :loading="loading"
                @click="handleOk"
                >确认</a-button
            >
        </template>
    </a-modal>
</template>

<script lang="ts">
import { useForm } from "@ant-design-vue/use";
import { defineComponent, reactive, toRefs, watch } from "vue";
import { InfoCircleFilled } from "@ant-design/icons-vue";
interface Form {
    sjly: string;
    sjymc: string;
    ip: string | number;
    port: string | number;
    sid?: string;
    yhm: string;
    fwmm: string | number;
    version: string | number;
    isable: string;
    bz: string;
}
export default defineComponent({
    name: "DataAdd",
    emits: ["handleOk", "handleCancel"],
    props: {
        loading: Boolean,
        visible: Boolean,
        title: String,
        row: Object,
        type: Number,
    },
    setup(props, { emit }) {
        const { row, visible }: any = toRefs(props);
        let form = reactive<Form>({
            sjly: "",
            sjymc: "",
            ip: "",
            port: "",
            sid: "",
            yhm: "",
            fwmm: "",
            version: "",
            isable: "",
            bz: "",
        });
        watch(visible, () => {
            Object.assign(form, row.value);
        });
        const rulesRef = reactive({
            sjly: [{ required: true, message: "" }],
            sjymc: [{ required: true, message: "" }],
            ip: [{ required: true, message: "" }],
            port: [{ required: true, message: "" }],
        });
        const { resetFields, validate, validateInfos } = useForm(
            form,
            rulesRef
        );
        const state = reactive({
            handleOk: () => {
                validate()
                    .then(() => {
                        emit("handleOk", form);
                    })
                    .catch((err) => {
                        console.log("error", err);
                    });
            },
            handleCancel: () => {
                resetFields();
                emit("handleCancel", form);
            },
            toggleChecked: (checked: boolean, event: Event) => {
                form.isable = checked ? "1" : "0";
            },
        });
        return {
            form,
            validateInfos,
            ...toRefs(state),
            ...toRefs(props),
        };
    },
    components: {
        InfoCircleFilled,
    },
});
</script>
<style lang="less" scoped>
.ant-form-item {
    margin-bottom: 2px;
}
</style>